<template>
    <el-dialog v-model="props.visible" :title="props.visible" :width="props.width" :fullscreen="props.fullscreen"
        :modal="props.modal" :close-on-click-modal="closeOnClickModal" :close-on-press-escape="closeOnPressEscape"
        :show-close="showClose" :before-close="beforeClose" class="ui-dialog" @open="onOpen" @close="onClose">
        <!-- 自定义标题插槽（默认使用title属性） -->
        <template #title v-if="$slots.title">
            <slot name="title" />
        </template>

        <!-- 内容区域 -->
        <div class="dialog-content">
            <slot />
        </div>

        <!-- 底部按钮区域（默认显示确认/取消，可通过插槽自定义） -->
        <template #footer v-if="showFooter">
            <slot name="footer">
                <el-button size="default" class="dialog-btn cancel-btn" @click="handleCancel">
                    {{ cancelText }}
                </el-button>
                <el-button size="default" class="dialog-btn confirm-btn" type="primary" @click="handleConfirm">
                    {{ confirmText }}
                </el-button>
            </slot>
        </template>
    </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue'

// 定义props
const props = defineProps({
    // 控制显示/隐藏
    visible: {
        type: Boolean,
        default: false
    },
    // 标题
    title: {
        type: String,
        default: '提示'
    },
    // 宽度（支持px/%，如'500px'或'80%'）
    width: {
        type: String,
        default: '600px'
    },
    // 是否全屏
    fullscreen: {
        type: Boolean,
        default: false
    },
    // 是否显示遮罩层
    modal: {
        type: Boolean,
        default: true
    },
    // 点击遮罩是否关闭
    closeOnClickModal: {
        type: Boolean,
        default: true
    },
    // 按ESC是否关闭
    closeOnPressEscape: {
        type: Boolean,
        default: true
    },
    // 是否显示关闭按钮
    showClose: {
        type: Boolean,
        default: true
    },
    // 是否显示底部按钮区
    showFooter: {
        type: Boolean,
        default: true
    },
    // 确认按钮文本
    confirmText: {
        type: String,
        default: '确认'
    },
    // 取消按钮文本
    cancelText: {
        type: String,
        default: '取消'
    }
})

// 定义事件
const emit = defineEmits([
    'update:visible', // 双向绑定更新显示状态
    'confirm', // 确认按钮点击
    'cancel', // 取消按钮点击
    'open', // 打开时触发
    'close' // 关闭时触发
])

// 关闭前回调（如需拦截关闭，可通过before-close实现）
const beforeClose = (done) => {
    emit('before-close', done)
}

// 处理确认
const handleConfirm = () => {
    emit('confirm')
}

// 处理取消
const handleCancel = () => {
    emit('cancel')
    emit('update:visible', false)
}

// 打开事件
const onOpen = () => {
    emit('open')
}

// 关闭事件
const onClose = () => {
    emit('close')
    emit('update:visible', false)
}
</script>

<style scoped lang="less">
/* ========== Dialog / Modal 模态框样式 ========== */
:deep(.el-dialog) {
    background: #1a1a1a !important;
    border: 1px solid #374151 !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

:deep(.el-dialog__header) {
    background: #1a1a1a !important;
    border-bottom: 1px solid #374151 !important;
    padding: 20px 24px 16px !important;
    border-radius: 12px 12px 0 0 !important;
}

:deep(.el-dialog__title) {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

:deep(.el-dialog__headerbtn) {
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    background: #374151 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

:deep(.el-dialog__headerbtn:hover) {
    background: #4b5563 !important;
}

:deep(.el-dialog__close) {
    color: #9ca3af !important;
    font-size: 16px !important;
}

:deep(.el-dialog__body) {
    background: #1a1a1a !important;
    color: #e5e7eb !important;
    padding: 24px !important;
}

:deep(.el-dialog__footer) {
    background: #1a1a1a !important;
    border-top: 1px solid #374151 !important;
    padding: 16px 24px 24px !important;
    border-radius: 0 0 12px 12px !important;
}

:deep(.el-overlay) {
    background: rgba(0, 0, 0, 0.7) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px) !important;
}
</style>
